<template>
  <div class="menu">
    <el-row type="flex" justify="end">
      <el-button
        icon="el-icon-delete"
        type="primary"
        size="medium"
        :disabled="!selectionList.length"
        @click="handleDelete"
      >
        批量删除
      </el-button>
      <el-button
        icon="el-icon-refresh"
        type="primary"
        size="medium"
        @click="openLevelDialog"
      >
        同步等级
      </el-button>
      <el-button
        icon="el-icon-plus"
        type="primary"
        size="medium"
        @click="handleCreateMenu"
      >
        新建等级
      </el-button>
    </el-row>
    <page-content
      ref="pageContent"
      v-loading="loading"
      :content-table-config="contentTableConfig"
      @selectionChange="selectionChange"
    >
      <template #operate="{ row }">
        <el-button
          type="text"
          size="small"
          icon="el-icon-delete"
          class="delete-btn"
          @click="handleDelete(row)"
        >
          删除
        </el-button>
      </template>
    </page-content>
    <PageModal
      :modal-form-data="modalFormData"
      :modal-form-config="modalFormConfig"
      :visible.sync="dialogVisible"
      title="新建等级"
      :btn-loading="confirmBtnLoading"
      @confirm="handleConfirm"
    />
    <!-- 同步等级 -->
    <MyDialog
      title="同步等级"
      show-cancel
      :visible="showLevelDialog"
      :ok-loading="btnLoading"
      width="600px"
      @close="showLevelDialog = false"
      @ok="handleSyncLevel"
    >
      <el-form
        ref="levelModalForm"
        label-width="100px"
        :model="modalLevelData"
        label-suffix=":"
        :rules="modalLevelRules"
      >
        <el-form-item label="同步等级" prop="level">
          <el-input-number
            v-model="modalLevelData.level"
            placeholder="请输入等级"
          />
          <el-tooltip
            class="item"
            effect="dark"
            content="最大等级级别，从1生成到level的等级信息"
            placement="top"
          >
            <i
              class="el-icon-question"
              style="font-size: 20px; margin-left: 10px"
            ></i>
          </el-tooltip>
        </el-form-item>
      </el-form>
    </MyDialog>
  </div>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
import { contentTableConfig } from "./config/content.config";
import { modalFormConfig } from "./config/modal.config";
import {
  fetchCreateLevel,
  fetchLevelList,
  fetchDeleteLevel,
  fetchSyncLevel,
} from "@/api/useManage";
export default {
  mixins: [dialogMixin],
  data() {
    return {
      btnLoading: false,
      loading: false,
      modalFormConfig,
      contentTableConfig,
      confirmBtnLoading: false,
      dialogVisible: false,
      modalFormData: {},
      showLevelDialog: false,
      modalLevelData: {
        level: undefined,
      },
      modalLevelRules: {
        level: [{ required: true, message: "请输入等级", trigger: "blur" }],
      },
      selectionList: [],
    };
  },
  mounted() {
    this.getLevelList();
  },
  methods: {
    selectionChange(selection) {
      this.selectionList = selection;
    },
    getLevelList() {
      this.loading = true;
      fetchLevelList()
        .then((res) => {
          res.data.forEach((item) => {
            if (item.level === 99) {
              item.disabled = true;
            }
          });
          this.contentTableConfig.dataList = res.data;
          this.$refs.pageContent.queryTblMain();
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleCreateMenu() {
      this.modalFormData = {};
      this.dialogVisible = true;
    },
    handleDelete({ level }) {
      const text = level ? "该等级" : "选中的等级";
      const newLevel = level
        ? level
        : this.selectionList.map((item) => item.level).join(",");
      this.$confirm(`确定删除${text}吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          fetchDeleteLevel({
            level: newLevel,
          }).then(() => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getLevelList();
          });
        })
        .catch(() => {});
    },
    openLevelDialog() {
      this.showLevelDialog = true;
      this.$nextTick(() => {
        this.$refs.levelModalForm.resetFields();
      });
    },
    handleSyncLevel() {
      this.$refs.levelModalForm.validate((valid) => {
        if (valid) {
          const { level } = this.modalLevelData;
          this.btnLoading = true;
          fetchSyncLevel(level)
            .then(() => {
              this.$message({
                type: "success",
                message: "同步成功!",
              });
              this.showLevelDialog = false;
              this.getLevelList();
            })
            .finally(() => {
              this.btnLoading = false;
            });
        }
      });
    },
    handleConfirm(data) {
      this.confirmBtnLoading = true;
      fetchCreateLevel(data)
        .then(() => {
          this.$message.success("创建成功");
          this.getLevelList();
          this.dialogVisible = false;
        })
        .finally(() => {
          this.confirmBtnLoading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.menu {
  padding: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
